<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css"  media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/plugins/font-awesome-4.7.0/css/font-awesome.min.css"  media="all">
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
</head>
<body>
<h2>轮播图</h2>
<button type="button" class="layui-btn" id="addbut">添加</button>
<form class="layui-form" id="addform" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">图片</label>
        <div class="layui-input-block">
            <input type="text" name="url" placeholder="请输入" id="urlInput" class="layui-input">
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="name" placeholder="请输入" class="layui-input">
     </div>
    </div>
    <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">请填写描述</label>
    <div class="layui-input-block">
        <input type="text" name="description" placeholder="请输入" class="layui-input">
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addSub">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table','layer','upload','form'], function(){
        var table = layui.table;
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var $ = layui.$;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,url: '${pageContext.request.contextPath}/banner/selectAll' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80}
                ,{field: 'url', title: '图片', width:150,templet: function(d){
                        return '<img src="/cmfz/'+d.url+'"/>'
                    }}
                ,{field: 'name', title: '名称', width:80}
                ,{field: 'date', title: '创建时间', width:80}
                ,{field: 'description', title: '介绍', width:80}
                ,{fixed: 'right', title: '操作', width: 135, toolbar: '#barDemo'}
            ]]
        });
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        url:"/cmfz/banner/delete"
                        ,data:"id="+data.id
                        ,success:function (resule) {
                            if (resule.flag){
                                layer.msg("删除成功")
                            } else{
                                layer.msg("删除失败")
                            }
                            table.reload('demo', {
                                url: '/cmfz/banner/selectAll'
                            });
                        }
                    })
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
            }
        });
        //----------添加-------------
        var index;
        $("#addbut").click(function () {
           index = layer.open({
                type: 1,
                content: $("#addform")
                ,skin: 'demo-class'
                ,area: ['500px', '300px']
            });
        })
        form.on('submit(addSub)', function(data){
            $.ajax({
                url:'/cmfz/banner/insert'
                ,data:data.field
                ,success:function (result) {
                    if (result.flag){
                        layer.msg("添加成功")
                    } else {
                        layer.msg("添加失败")
                    }
                    $("#addform")[0].reset();
                    table.reload('demo', {
                        url: '/cmfz/banner/selectAll'
                    });
                    layer.close(index);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //----------添加-------------
        //----------文件上传-------------
        upload.render({
            elem: '#test1' //绑定元素
            ,url: '/cmfz/banner/addImg'//上传接口
            ,done: function(res){
                $("#urlInput").val(res.flag)
            }
        })
        //----------文件上传-------------

    });
</script>
</body>
</html>
